<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic CRUD Application - jQuery EasyUI CRUD Demo</title>
    <link rel="stylesheet" type="text/css" href="../js/util/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../js/util/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../js/util/easyui/themes/color.css">
    <link rel="stylesheet" type="text/css" href="../js/util/easyui/demo/demo.css">
    <script type="text/javascript" src="../js/util/jquery/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="../js/util/easyui/jquery.easyui.min.js"></script>
</head>
<body>
   <h2>12306火车票</h2>
    <p>Click the buttons on datagrid toolbar to do crud actions.</p>
  
    <table id="dg" title="My Tickets" class="easyui-datagrid" style="width:700px;height:250px"
            url="../ticketDisplay?f=showTickets"
            toolbar="#toolbar" pagination="true"
            rownumbers="true" fitColumns="true" singleSelect="true">
             
        <thead>
            <tr>
                <th field="ticketid" width="50">车票编号</th>
                <th field="count" width="50">车票数量</th>
                <th field="price" width="50">车票价格 </th>
                <th field="splace" width="50">起点</th>
                 <th field="eplace" width="50">终点</th>
                  <th field="stime" width="50">发车时间</th>
                  <th field="etime" width="50">到达时间</th>
            </tr>
        
        </thead>
    </table>
    <div id="toolbar">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" 

onclick="newTicket()">New Ticket</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" 

onclick="editTicket()">Edit Ticket</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" 

onclick="destroyTicket()">Remove Ticket</a>
    </div>
    
    <div id="dlg" class="easyui-dialog" style="width:400px"
            closed="true" buttons="#dlg-buttons">
        <form id="fm"  method="post" novalidate style="margin:0;padding:20px 50px">
            <div style="margin-bottom:20px;font-size:14px;border-bottom:1px solid #ccc">Tickets Information</div>
            <div style="margin-bottom:10px" id="hhh">
                <input  id="tid" name="ticketid"   class="easyui-textbox" label="车票编号:" style="width:100%">
            </div>
            <div style="margin-bottom:10px">
                <input id="c" name="count" class="easyui-textbox" required="true" label="车票数量:" style="width:100%">
            </div>
            <div style="margin-bottom:10px">
                <input name="price" class="easyui-textbox" required="true" label="车票价格:" style="width:100%">
            </div>
            <div style="margin-bottom:10px">
                <input name="splace" class="easyui-textbox" required="true" label="起点:" style="width:100%">
            </div>
             <div style="margin-bottom:10px">
                <input name="eplace" class="easyui-textbox" required="true"  label="终点:" style="width:100%">
            </div>
             <div style="margin-bottom:10px">
                <input name="stime" class="easyui-textbox" required="true"  label="发车时间:" style="width:100%">
            </div>
             <div style="margin-bottom:10px">
                <input name="etime" class="easyui-textbox" required="true"  label="路程时长:" style="width:100%">
            </div>
        </form>
    </div>
    <div id="dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveTicket()" 

    style="width:90px">Save</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:

$('#dlg').dialog('close')" style="width:90px">Cancel</a>
    </div>
    <script type="text/javascript">
        var url;
        function newTicket(){
        	$('#hhh').hide(); 
            $('#dlg').dialog('open').dialog('center').dialog('setTitle','New Ticket');
            $('#fm').form('clear');
            url = '../ticketDisplay?f=add';
        }
        function editTicket() {
            var row = $('#dg').datagrid('getSelected'); //获取选中的行
            alert(row.ticketid);
            $('#hhh').hide();
            $('#dlg').dialog('open').dialog('center').dialog('setTitle', 'Edit User');
            $('#fm').form('load', row);
            url = '../ticketDisplay?f=update';
           
        }
        function saveTicket() {
        	var count=document.getElementById("c").value;
        	var reg = /^\+?[1-9]\d*$/;
            if(!reg.test(count)){
              alert("非法输入！请重新输入");
            
            }
            $('#fm').form('submit', {
                url: url,
               
                onSubmit: function () {
                    return $(this).form('validate');
                   
                },
               
                success: function (result) {
                	
                		 $("#dlg").dialog("close");
                         $("#dg").datagrid("load");
                	
                	/*  $.messager.alert("提示信息", "操作成功"); */
                    
            	 }
             });
        }
        
        function destroyTicket() {
       	 var row = $('#dg').datagrid('getSelected');
    	 var ticketid=document.getElementById("tid").value;
    	 $.ajax({
        	 url:'../ticketDisplay?f=delete',
        	 cache:false,
        	 dataType:"JSON",
        	 type:"POST",
        	 data:{
        		 "ticketid":row.ticketid,     
        	 },
        	 success:function(result){
        		 $.messager.alert("提示信息", "操作成功");
                 $("#dlg").dialog("close");
                 $("#dg").datagrid("load");
                // $("#dg").datagrid("reload",{});
        	 }
         });
    }
  
    </script>
</body>
</html>